<template>
    <div id="stock-hold-echart" :style="{ width: '1400px', height: '800px' }"></div>
</template>

<script>
import { onMounted, watch } from "vue";
import * as echarts from 'echarts'

import { getStockHold } from "../../service/stock";
import { builtTreeMapEchartOption } from "../../myechart/TreeMapEchart";

export
default {
    setup() {
        let myChart = null
        const initEchart = () => {
            myChart = echarts.init(document.getElementById('stock-hold-echart'))
            window.onresize = function () {//自适应大小
                myChart.resize();
            };
        }

        const loadEchart = () => {
            getStockHold().then(res => {
                let option = builtTreeMapEchartOption(res.data)
                console.log(option)
                myChart.setOption(option)
            })
        }

        onMounted(()=> {
            initEchart()
            loadEchart()
        })
    }
}
</script>